import { reactive } from 'vue'
import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'

export const useAppStore = defineStore('app', () => {
  const sidebarStatus = useStorage('sidebarStatus', 'closed')

  const sidebar = reactive({
    opened: sidebarStatus.value !== 'closed',
    withoutAnimation: false
  })

  function toggleSidebar() {
    sidebar.opened = !sidebar.opened
    sidebar.withoutAnimation = false
    if (sidebar.opened) {
      sidebarStatus.value = 'opened'
    } else {
      sidebarStatus.value = 'closed'
    }
  }

  return { sidebar, toggleSidebar }
})
